<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="./js/jquery-1.9.0.js"></script>
    <link rel="stylesheet" href="./swiper/css/swiper.min.css">
    <script src="./swiper/js/swiper.min.js"></script>
</head>
<body>
    <div id="app">
        <p ref="pdom">msg:{{ msg }}</p>
        <input type="button" value="修改msg" @click="setMsg()">
        <hr>
        <div class="swiper-container" ref="loop">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in loops" :key="index">
                    <img :src="item.image_800" alt="" srcset="">
                </div>
            </div>
        </div>
        <hr>
        <input type="button" value="加载轮播图数据" @click="loadLoops()">
    </div>
</body>
<script>
    /*
    - Vue中对部分特殊的属性和功能方法进行特殊指代定义，用于提供独立的执行和获取方式
    - Vue的实例属性和方法以统一规范以 $ 开头
    - 相关实例属性和方法 
        - vm.$el：描述当前Vue实例使用的根 DOM 元素。
        - vm.$data：描述当前Vue实例观察的数据对象。
        - vm.$options：构建当前 Vue 实例的初始化选项。 -> 将内置配置和开发者配置进行整合转换后的配置项
        - vm.$refs：返回一个对象，记录当前Vue实例模板中，定义了ref属性的所有 DOM 元素。

        - vm.$watch：构建一个对Vue实例中数据仓库中变量（data，computed）的监控方法
        - vm.$set：等同于 Vue.set ，手动为实例中没有数据监听的变量添加监视功能
            !!! 只能为data中已经存在的 对象进行新属性添加，不能直接为 data仓库添加新属性
        - vm.$delete：等同于 Vue.delete ，手动为实例中的变量删除监视功能
            !!! 只能为data中已经存在的 对象进行属性删除，不能直接为 data仓库进行操作
        - vm.$forceUpdate()：迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
        
        - vm.$nextTick(function)：等同于 Vue.nextTick(function) ，将执行函数体延迟到页面DOM更新完成后执行
            !!! 通过对数据仓库中的变量修改，触发响应特性，可以完成页面的同步渲染
            !!! 而页面渲染是需要时间的，内存中的仓库中的变量变化完成后，并不代表页面完成渲染操作
            
        - vm.$mount：手动挂在Vue实例
        - vm.$destroy：手动销毁Vue实例
    */
    let vm = new Vue({
        el:"#app",
        data:{
           msg:"msg数据",
           loops:[]
        },
        methods: {
            setMsg(){
                this.msg = Math.random();
                this.$nextTick(()=>{
                    console.log("nextTick后的页面元素内容:",this.$refs.pdom.textContent);
                });
                console.log("赋值完成后的仓库变量:",this.msg);
                console.log("赋值完成后的直接获取页面元素的内容:",this.$refs.pdom.textContent);
            },
            loadLoops(){
                $.ajax({
                    url:"https://mce.mogucdn.com/jsonp/multiget/3",
                    method:"get",
                    data:{
                        appPlat:"m",
                        pids:"140378"
                    },
                    dataType:"jsonp",
                    success:(res)=>{
                        // console.log(res.data[140378].list);
                        this.loops = res.data["140378"].list;
                        this.$nextTick(()=>{
                            // new Swiper('.swiper-container', {
                            //     autoplay: true,//可选选项，自动滑动
                            // })
                            new Swiper(this.$refs.loop, {
                                autoplay: true,//可选选项，自动滑动
                            })
                        })
                    }
                })
            }
        },
    });
</script>
</html>